<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VUE音乐播放</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-size: cover;
            background-image: url(https://pic.netbian.com/uploads/allimg/210920/165135-16321278956369.jpg);
        }
        audio{
            padding-top: 20px;
            width: 500px;
            display: flex;
            margin: 0 auto;
        }
        button{
            display: block;
            
            margin: 0 auto;
            background-color: aqua;
        }
        ul{
            border: 1px solid #fff;
            width: 500px;
            margin: 0 auto;
        }
        ul li{
            list-style-type: none;
            
        }
        .active{
            background-color: aqua;
        }
        
    </style>
</head>
<body>
    <div id="box">
        
        <audio :src="paths" controls autoplay @ended="toSinger"></audio>
        <button @click="btn">下一首</button><button @click="btn2">上一首</button>
        <br>
        <ul v-for="(item,index) in musics" :key="index"  >
            <li :class="{active:index===singerIndex}" @click="musicbtn(item.path,index)">
                <h2>{{item.name}}</h2>
                <p>歌手：{{item.singer}}</p>
                <hr>
            </li>
        </ul>
        
    </div>
    <script>
        // 设置歌曲信息数据
        const musics= [{
                id:1,
                name:'单车-陈奕迅',
                singer:'陈奕迅',
                path:'../MP3/单车-陈奕迅.mp3'
            },
            {
                id:2,
                name:'还有梦想-念宣',
                singer:'念宣',
                path:'../MP3/还有梦想-念宣.mp3'
            },
            {
                id:3,
                name:'海阔天空-Beyond',
                singer:'Beyond',
                path:'../MP3/海阔天空-Beyond.mp3'
            },
            {
                id:4,
                name:'玫瑰花的葬礼-许嵩',
                singer:'许嵩',
                path:'../MP3/玫瑰花的葬礼-许嵩.mp3'
            },
            {
                id:5,
                name:'清明雨上-许嵩',
                singer:'许嵩',
                path:'../MP3/清明雨上-许嵩.mp3'
            }
        ];
        new Vue({
            el:"#box",
            data:{
                musics:musics,
                paths:'../MP3/单车-陈奕迅.mp3',
                singerIndex:0
            },
            methods: {
                musicbtn(path,index){
                    this.paths = path
                    this.singerIndex = index
                },
                toSinger(){
                    this.btn()
                },
                btn(){
                    this.singerIndex++
                    if(this.singerIndex == this.musics.length){
                        this.singerIndex = 0
                    }
                    this.paths = this.musics[this.singerIndex].path
                },
                btn2(){
                    this.singerIndex--
                    if(this.singerIndex < 0){
                        this.singerIndex = this.musics.length-1
                    }
                    this.paths = this.musics[this.singerIndex].path
                }
                
                
            },

        })




    </script>


   
</body>
</html>